/*
 * @Author: Jim <jimjiang0909@gmail.com>
 * @Create time:   2016-07-25 17:56:22
 * @Last Modified by:   Jim
 * @Last Modified time: 2016-08-29 16:27:40
 * @File Name: matches.js
 */

'use strict';

import React, {Component} from 'react';

import {
    StyleSheet,
    View,
    Text,
    TouchableOpacity,
    ScrollView,
} from 'react-native';
let { width, height } = Utils.size;
const headData = [
                    {'tab': 'last', 'title': "Who You Like", 'api': 'meet_last_round'},
                    {'tab': 'likes', 'title': "Who Likes You", 'api': 'meet_likes_me'},
                    {'tab': 'matched', 'title': "Mutual Match", 'api': 'meet_my_matched'},
                 ];
import UserList from '../common/userList';

export default class Matches extends Component {
    constructor(props) {
        super(props);
        this.state = {
            tab: 'last',
        };
        this._tabsIndex = {'last': 0, 'likes': 1, 'matched': 2,};
        this.selectedTabs = ['last'];
    }

    componentDidMount() {
        this._scrollView && this._scrollView.scrollTo({
            x: this._tabsIndex[this.state.tab] * width,
            y: 0,
            animated: false,
        });
    }

    render() {
        return (
            <View style={styles.container}>
                <View style={styles.tabHead}>
                        {this.renderHead()}
                </View>
                <View style={styles.content}>
                        <ScrollView
                            ref={(component) => {this._scrollView = component}}
                            pagingEnabled={true}
                            scrollEventThrottle={1}
                            horizontal={true}
                            showsHorizontalScrollIndicator={false}
                            onScroll={(e)=>this.onScroll(e)}
                            scrollEnabled={false}
                            onScrollAnimationEnd={(e)=>console.log('end')}
                        >
                            { this.renderContents() }
                        </ScrollView>
                </View> 
            </View>
        )
    }

    renderHead() {
        let head = [];
        for(let i in headData) {
            head.push(<TouchableOpacity key={'head_' + headData[i].tab} style={this.getIndexTabNameStyle(headData[i].tab)} activeOpacity={1} onPress={ () => this.goToScrollTo(headData[i].tab) } >
                            <Text style={this.getIndexTextColor(headData[i].tab)}> {headData[i].title} </Text>   
                        </TouchableOpacity> );
        }
        return head;
    }

    renderContents() {
        let contents = [];
        for(let i in headData) {
            contents.push( this.renderContent(headData[i].tab, headData[i].api) );
        }
        return contents;
    }

    getIndexTabNameStyle(tab) {
        let tabNameStyle = styles.tabNameView;
        if (tab === this.state.tab && tab === 'last') {
            tabNameStyle  = [styles.tabNameView,styles.tabNameIndex,{borderLeftWidth:0}];
        } else if (tab === this.state.tab) {
            tabNameStyle  = [styles.tabNameView,styles.tabNameIndex];
        }
        return tabNameStyle;
    }

    getIndexTextColor(tab) {
        let tabTextStyle = styles.tabName;
        if (tab == this.state.tab) {
            tabTextStyle = [styles.tabName,{color:'#56ade0'}];
        }
        return tabTextStyle;
    }

    onScroll(e) {
        // let pageNum = e.nativeEvent.contentOffset.x/width;
        // if (parseInt(pageNum) === pageNum) {
        //     this.setState({index:pageNum})
        // }
    }

    goToScrollTo(tab) {
        if(this.state.tab !== tab) {
            if(_.indexOf(this.selectedTabs, tab) == -1) {
                this.selectedTabs.push(tab);
            }
            this.setState({tab: tab}) 
            this._scrollView && this._scrollView.scrollTo({
                x: this._tabsIndex[tab] * width,
                y: 0,
                animated: true,
            }); 
        }
    }

    renderContent(tab, api) {
        if(_.indexOf(this.selectedTabs, tab) > -1) {
            return (<UserList key={tab} api={api} options={{page_num: 0, offset  : 20}} navigator={this.props.navigator} />)              
        } else {
            return (
                <View key={'matches_' + tab}>
                    {Utils.loading()}
                </View>
            );
        }    
    }

}

const styles = StyleSheet.create(Css.MatchesStyle);